<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>博客列表页</title>
    <link rel="stylesheet" href="css/common.css">
    <link rel="stylesheet" href="css/blog_list.css">



    <!-- 前后端交互 过程中 代码编写 需要 做的事情  ：  引入 jquery -->
    <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>



</head>
<body>
    <!-- 导航栏 -->
    <div class="nav">
        <img src="image/logo2.jpg" alt="">
        <span class="title">我的博客系统</span>
        <!-- 这个标签仅仅用于占位, 把这几个 a 标签挤到右侧去 -->
        <div class="spacer"></div>
        <a href="blog_list.html">主页</a>
        <a href="blog_edit.html">写博客</a>


        <!-- a标签 本来就可以自己发起一个 HTTP的请求，所以说 只需要改一下 href 的参数就可以实现 退出登录的操作了-->
        <a href="logout">注销</a>
    </div>
    <!-- 页面主体部分 -->
    <div class="container">
        <!-- 左侧信息 -->
        <div class="container-left">
            <!-- 使用这个 .card 表示用户信息 -->
            <div class="card">
                <!-- 用户头像 -->
                <img src="image/狗头.png" alt="">
                <!-- 用户名 -->
                <h3></h3>
                <a href="#">github 地址</a>
                <div class="counter">
                    <span>文章</span>
                    <span>分类</span>
                </div>
                <div class="counter">
                    <span>2</span>
                    <span>1</span>
                </div>
            </div>
        </div>
        <!-- 右侧信息 -->





        <!-- 前后端交互 过程中 代码编写 需要 做的事情  ：  之前写死的 博客内容部分，先删掉，我们要进行前后端交互来取博客了 -->
        <!-- 前后端交互 过程中 代码编写 需要 做的事情  ：  可以留一个作为例子，但是需要注释掉，照着这个来写就行 -->
        <div class="container-right">
            <!-- 表示一篇博客 -->
            <!--<div class="blog">
                &lt;!&ndash; 博客标题 &ndash;&gt;
                <div class="title">我的第一篇博客</div>
                &lt;!&ndash; 发布时间 &ndash;&gt;
                <div class="date">2023-02-27</div>
                &lt;!&ndash; 博客的摘要 &ndash;&gt;
                <div class="desc">
                    从今天起, 我要认真敲代码. Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptate aspernatur iste totam modi doloremque, magnam iure, distinctio laboriosam eos nemo quaerat suscipit cum quidem recusandae numquam nulla voluptatum nihil quas?
                </div>
                &lt;!&ndash; 查看全文按钮 &ndash;&gt;
                <a href="#">查看全文 &gt;&gt; </a>
            </div>-->



        </div>
    </div>



    <!-- 前后端交互 过程中 代码编写 需要 做的事情  ： 写 ajax 代码  -->
    <script>
        // 通过 ajax 给服务器发请求，获取到所有的博客数据,并且构造到页面上

        //定义一个函数
        function getBlogs(){
            $.ajax({
                type:'get',
                url:'blog',
                success: function(body){
                // 根据页面的结构走的
                    // 根据返回的数据，构造出页面中对应的元素
                    // 当前返回的这个 body 是一个 json 类型的数组了
                    // 所以在这里，我们可以直接把这个body 当做有个数据去遍历的

                    let containerRight = document.querySelector('.container-right');
                    for(let blog of body){
                        // 这里面的 每个 blog 就是一篇博客
                        // 创建每个标签
                        let blogDiv = document.createElement("div");
                        blogDiv.className = 'blog';
                        let titleDiv = document.createElement("div");
                        titleDiv.className = 'title';
                        titleDiv.innerHTML = blog.title;
                        let dateDiv = document.createElement("div");
                        dateDiv.className = 'date';
                        dateDiv.innerHTML = blog.dataTime;
                         let descDiv = document.createElement("div");
                        descDiv.className = 'desc';
                        descDiv.innerHTML = blog.content;

                        // a标签这里也需要出那个创建
                        let a = document.createElement("a");
                        a.href = 'blog_detail.html?blogId=' + blog.blogId;
                        a.innerHTML = '查看全文 &gt;&gt;';

                        // 把每个标签都加到 blogDiv 标签里面去(把标签们组合起来)
                        blogDiv.appendChild(titleDiv);
                        blogDiv.appendChild(dateDiv);
                        blogDiv.appendChild(descDiv);
                        blogDiv.appendChild(a);
                        // 还需要把 blogDiv 添加到 上面的 containerRight 中
                        containerRight.appendChild(blogDiv);
                    }
                }
            });
        }
        //然后 调用这个函数(函数需要被调用)
        getBlogs();




   //  <!-- 验证登录的时候需要做的事情-->
   // 写一个方法来获得 登录状态的 状态码
   function getLoginStatus(){
    $.ajax({
        type: 'get',
        url: 'login',
        success: function(body){
            // 响应 返回 200 的时候会执行到 下面的代码
            // 返回200 表示 用户已经登录
            console.log("用户已登录");


            //  博客列表页 ： 登录成功，需要把 登录用户的信息 加入到页面左侧位置
            let h3 = document.querySelector('.card h3');
            // 这里的body 就是 一个js对象了，是 服务器返回的那个 json 格式的  user 对象
            h3.innerHTML = body.username;

        },
        error: function(body){
            // 响应返回的 不是 200的时候
            // 登录未成功
            // 需要 跳转到 登录页面(login.html 主页)
            // 前端跳转的写法
            location.assign("login.html");
        }

    });
   }
   // 记得调用方法
   getLoginStatus();




    </script>





</body>
</html>